<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Page Header
      <small>Optional description</small>
    </h1>
    <ol class="breadcrumb">
      <li>
        <a href="#">
          <i class="fa fa-dashboard"></i> Level</a>
      </li>
      <li class="active">Here</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content container-fluid">

    <div class="box">

      <div class="box-head">
        <div class="form-inline box-header with-border">
          <a class="btn btn-success">创建</a>
          <!-- <input type="text" class="form-control pull-right" placeholder="查找 ..."> -->
          <div class="input-group pull-right">
              <span class="input-group-addon"><i class="glyphicon glyphicon-zoom-in"></i></span>
              <input type="text" class="form-control" placeholder="查找 ...">
            </div>
        </div>
      </div>
      <!-- /.box-header -->
      
      <div class="box-body">
        <table class="table table-bordered">
          <tr>
            <th style="width: 10px">#</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版时间</th>
            <th>评分</th>
            <th>操作</th>
          </tr>
          <tr *ngFor="let book of books; let i = index">
            <td>{{i}}.</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            <td>{{book.publish}}</td>
            <td>
              <app-star [rating]="book.grade"></app-star>
            </td>
            <td>
              <a class="btn btn-warning btn-sm">更新</a>
              <a class="btn btn-danger btn-sm">删除</a>
            </td>
          </tr>

        </table>
      </div>
      <!-- /.box-body -->
      <div class="box-footer clearfix">
        <ul class="pagination pagination-sm no-margin pull-right">
          <li>
            <a href="#">&laquo;</a>
          </li>
          <li>
            <a href="#">1</a>
          </li>
          <li>
            <a href="#">2</a>
          </li>
          <li>
            <a href="#">3</a>
          </li>
          <li>
            <a href="#">&raquo;</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- /.box -->

  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->